<template>
  <div>
    <common-filters :renderData="renderData" :filterInfo="filterInfo" @search="onSearch"/>
    <common-operate>
      <template #right>
        <el-button type="primary">btn1</el-button>
        <el-button type="success">btn2</el-button>
        <el-button type="danger">btn3</el-button>
      </template>
    </common-operate>
    <common-table
      :tableData="tableData"
      :tableHeader="tableHeader"
      :key="'id'"
    />
    <common-modal
      isScroll
      v-model:visible="showModalForm"
      title="编辑"
    ></common-modal>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getTableData } from "../../api/tableData";
const showModalForm = ref<boolean>(false);
const handleLook = () => {
  showModalForm.value = true;
};
const handleEdit = () => {};
const tableHeader = [
  {
    type: "selection",
    minWidth: "30px",
  },
  {
    prop: "id",
    label: "编号",
    minWidth: "30px",
  },
  {
    prop: "themeTitle",
    label: "主题名称",
    minWidth: "150px",
    formatter:(row, column, cellValue, index)=>{
      return index + cellValue;
    },
    sortable: true
  },
  {
    prop: "userName",
    label: "发布人",
    minWidth: "80px",
    sortable: true
  },
  {
    prop: "worksCount",
    label: "参与作品",
    width: 200,
  },
  {
    prop: "btn",
    label: "操作",
    minWidth: "120px",
    btn: [
      {
        name: "查看",
        type: "primary",
        func: handleLook,
      },
      {
        name: "编辑",
        type: "success",
        func: handleEdit,
      },
    ],
  },
];
const tableData = ref<any[]>([]);

const asyncGetData = async () => {
  const { data, code } = await getTableData();
  if (code === 200) {
    tableData.value = data as any[];
  }
};

onMounted(() => {
  asyncGetData();
});

const filterInfo = reactive({
    status: '',
    name: ''
})

const renderData = [
  {
    filterKey: "status", // 绑定的字段
    type: "select", // 类型（重点）
    placeholder: "请选择",
    label: "人员", // 渲染的名字
    filterable: true, // 是否支持过滤
    options: [
      // 选项框的选项
      { label: "朱凤丽", value: 999 },
    ],
  },
  {
    filterKey: "name", // 绑定的字段
    type: "input", // 类型（重点）
    placeholder: "请输入",
    label: "姓名", // 渲染的名字
  },
  // {
  //   filterKey: "s", // 绑定的字段
  //   type: "select", // 类型（重点）
  //   placeholder: "请选择",
  //   label: "操作行为1", // 渲染的名字
  //   filterable: true, // 是否支持过滤
  //   options: [
  //     // 选项框的选项
  //     { label: "朱凤丽", value: 999 },
  //   ],
  // },
  // {
  //   filterKey: "d", // 绑定的字段
  //   type: "select", // 类型（重点）
  //   placeholder: "请选择",
  //   label: "操作行为2", // 渲染的名字
  //   filterable: true, // 是否支持过滤
  //   options: [
  //     // 选项框的选项
  //     { label: "朱凤丽", value: 999 },
  //   ],
  // },
  // {
  //   filterKey: "f", // 绑定的字段
  //   type: "select", // 类型（重点）
  //   placeholder: "请选择",
  //   label: "操作行为3", // 渲染的名字
  //   options: [
  //     // 选项框的选项
  //     { label: "朱凤丽", value: 999 },
  //   ],
  // },
];

const onSearch = ()=>{
  console.log(filterInfo);
  
}
</script>

<style scoped lang="scss"></style>
